import {useEffect,useState} from 'react'
import { Row, Col, Input } from 'antd';
import { AliwangwangOutlined } from '@ant-design/icons'
import BlogItem from '../../Blog/BlogItem'
import Achievement from './Achievement'
import Areaside from './Areaside'
import Tags from './Tag'
import store from '../../../redux/store'
import './index.less'
const { Search } = Input;
export default function InnerContainer() {
  // console.log('store',store.getState())
  const [blogList,getBlogList] = useState([])
  // let msg = store.getState()
  // const blogList = msg.blog
  // const blogList = []
  const [tag,setTag] = useState([])
  const [area,setArea] = useState([])
  // getBlogList(store.getState().blog)
  useEffect(()=>{
    store.subscribe(()=>{
      // 只要 redux 数据改变 就会走这个回调
      // this.setState({})
      // console.log('aaa')
      let msg = store.getState()
      // console.log('msg',msg)
      getBlogList(msg.blog)
      console.log('msg',msg)
      setTag(msg.user.tag?msg.user.tag:[])
      setArea(msg.user.area?msg.user.area:[])
    })
    
  },[])

  return (
    <div className="InnerContainer">
      {/* <h2>zhiongxuin</h2> */}
      <Row gutter={16}>
        <Col className="gutter-row navlink" span={18}>
          <div className="gutter-box flex-between cardBox navlink">
            <ul className="flex-center">
              <li>最近</li>
              <li>文章·90</li>
              <li>点赞·90</li>
              <li>收藏·90</li>
              <li>关注·90</li>
            </ul>
            <div className="search">
              <Search
                placeholder="input search text"
                onSearch={value => console.log(value)}
                style={{ width: 200 }}
              />
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={6}>
          <div className="gutter-box addInfo align-center cardBox">
            <AliwangwangOutlined style={{ fontSize: '20px', marginRight: '10px' }} />
            <span>于</span>
            <span>2021-05-23</span>
            <span>加入JimmyBlog</span>
          </div>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col className="gutter-row article-item" span={18}>
          {blogList.map(blog=>{
            return <BlogItem key={blog.blogid} blog={blog} />
          })}
        </Col>
        <Col className="gutter-row" span={6}>
          <Achievement />
          <Areaside area={area} />
          <Tags tag={tag} />
        </Col>
      </Row>
    </div>
  )
}